<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>表单提交 | 上课讲义</title>
    <meta name="description" content="A VitePress site">
    <link rel="stylesheet" href="/tingweipeng/assets/style.f3d4564a.css">
    <link rel="modulepreload" href="/tingweipeng/assets/app.bfa3a24a.js">
    <link rel="modulepreload" href="/tingweipeng/assets/ajax_day02.md.e35eca52.lean.js">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f44a984a><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f44a984a data-v-a50780ff><div class="VPNavBar has-sidebar" data-v-a50780ff data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle has-sidebar" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/tingweipeng/" data-v-d5925166><!--[--><!--]--><!----><!--[-->上课讲义<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/webapis/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->webapis<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/js进阶/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->js进阶<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/ajax/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->ajax<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/vue基础/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->vue基础<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6f1d18b5 data-v-e4361c82 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e4361c82><div class="item appearance" data-v-e4361c82><p class="label" data-v-e4361c82>Appearance</p><div class="appearance-action" data-v-e4361c82><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-e4361c82 data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6f1d18b5 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-f44a984a data-v-b6162a8b><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b6162a8b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b6162a8b><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b6162a8b>Menu</span></button><a class="top-link" href="#" data-v-b6162a8b> Return to top </a></div><aside class="VPSidebar" data-v-f44a984a data-v-a186aa16><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-a186aa16><span class="visually-hidden" id="sidebar-aria-label" data-v-a186aa16> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-a186aa16><section class="VPSidebarGroup" data-v-a186aa16 data-v-6e45c352><div class="title" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>ajax</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>01-初识ajax</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link active" href="/tingweipeng/ajax/day02.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>02-表单提交</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day03.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>03-xhr和promise</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day04.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>04-异步编程和事件循环</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f44a984a data-v-d981fe29><div class="VPDoc has-sidebar has-aside" data-v-d981fe29 data-v-cfb513e0><div class="container" data-v-cfb513e0><div class="aside" data-v-cfb513e0><div class="aside-curtain" data-v-cfb513e0></div><div class="aside-container" data-v-cfb513e0><div class="aside-content" data-v-cfb513e0><div class="VPDocAside" data-v-cfb513e0 data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-afc4c1a1 data-v-2865c0b0><div class="content" data-v-2865c0b0><div class="outline-marker" data-v-2865c0b0></div><div class="outline-title" data-v-2865c0b0>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-2865c0b0><span class="visually-hidden" id="doc-outline-aria-label" data-v-2865c0b0> Table of Contents for current page </span><ul class="root" data-v-2865c0b0 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-cfb513e0><div class="content-container" data-v-cfb513e0><!--[--><!--]--><main class="main" data-v-cfb513e0><div style="position:relative;" class="vp-doc _tingweipeng_ajax_day02" data-v-cfb513e0><div><h1 id="表单提交" tabindex="-1">表单提交 <a class="header-anchor" href="#表单提交" aria-hidden="true">#</a></h1><h2 id="学习目标" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标" aria-hidden="true">#</a></h2><ol><li>掌握axios提交表单数据的用法</li><li>掌握请求体参数类型的区别</li><li>完成图书管理案例</li></ol><h2 id="概念-表单" tabindex="-1">概念-表单 <a class="header-anchor" href="#概念-表单" aria-hidden="true">#</a></h2><h3 id="目标" tabindex="-1">目标 <a class="header-anchor" href="#目标" aria-hidden="true">#</a></h3><p>了解|复习HTML中的表单元素</p><h3 id="form标签" tabindex="-1">form标签 <a class="header-anchor" href="#form标签" aria-hidden="true">#</a></h3><p>form标签（表单）是用来收集用户输入的信息。</p><p><img src="/tingweipeng/assets/1667965613197-c85883ab-3079-43ca-8e2b-e3404e8f7661.28f1a1e0.png" alt="image.png" data-fancybox="gallery"> 一个完整的表单的组成</p><ul><li>表单标签： form</li><li>表单域: input, checkbox, select ...</li><li>表单按钮<code>&lt;button type=&quot;submit&quot;&gt;&lt;/button&gt;</code></li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;"> &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;email_or_mobile&quot;</span><span style="color:#C9D1D9;">/&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;checkbox&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;remember_me&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">checked</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;">&gt;登录&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-hidden="true">#</a></h3><p><img src="/tingweipeng/assets/1667965642421-543bc967-c2e4-4d75-bc30-07045227595e.83b0ff12.png" alt="image.png" data-fancybox="gallery"></p><ol start="3"><li>表单域</li></ol><blockquote><p>常见的有input, textarea, select等</p></blockquote><p><img src="/tingweipeng/assets/1667965659440-6e71b6ce-d6a1-44de-b1f9-d7fb942cbb48.9336e516.png" alt="image.png" data-fancybox="gallery"></p><ol start="5"><li>表单按钮 <img src="/tingweipeng/assets/1667965676759-1065f3d0-3bda-4248-9b12-5c063788f105.8bc6bf23.png" alt="image.png" data-fancybox="gallery"></li></ol><h3 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-hidden="true">#</a></h3><ol><li><p>form表单的作用是什么?</p><details><summary>答案</summary><ul><li> 用来收集用户输入的信息 </li></ul></details></li><li><p>一个完整的表单的组成部分?</p><details><summary>答案</summary><ul><li> 表单, 表单域, 表单按钮 </li></ul></details></li></ol><h2 id="语法-表单自我提交" tabindex="-1">语法-表单自我提交 <a class="header-anchor" href="#语法-表单自我提交" aria-hidden="true">#</a></h2><h3 id="目标-1" tabindex="-1">目标 <a class="header-anchor" href="#目标-1" aria-hidden="true">#</a></h3><p>掌握表单元素的action和method两个属性的使用，了解表单自我提交功能</p><h3 id="格式" tabindex="-1">格式 <a class="header-anchor" href="#格式" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">&lt;!-- action: 接口的url地址。method: get或post，数据的提交方式（默认为GET） --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">action</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;提交地址&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">method</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;提交方式&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  // 其他元素</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="示例-1" tabindex="-1">示例 <a class="header-anchor" href="#示例-1" aria-hidden="true">#</a></h3><p>新建<code>表单自我提交.html</code>, 准备一个完整的表单三元素</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;01-02.语法_表单自我提交&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> &gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 用户名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;用户名：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 密码： --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;登录密码：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 提交按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;提交&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>提交的地址和方式：</p><blockquote><p>接口地址: <a href="http://ajax-api.itheima.net/api/data" target="_blank" rel="noreferrer">http://ajax-api.itheima.net/api/data</a> 请求方式: POST</p></blockquote><h3 id="完整代码" tabindex="-1">完整代码 <a class="header-anchor" href="#完整代码" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">action</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;http://ajax-api.itheima.net/api/data&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">method</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;POST&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 用户名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;用户名：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 密码： --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;登录密码：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 提交按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;提交&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="效果" tabindex="-1">效果 <a class="header-anchor" href="#效果" aria-hidden="true">#</a></h3><p>用户输入内容之后，点击提交按钮，会把数据提交给服务器，但是也会<strong>导致整个页面刷新跳转</strong>, 体验非常不好, 所以现在基本用Ajax配合表单异步不刷新网页的在JS代码中提交了</p><h3 id="小结-1" tabindex="-1">小结 <a class="header-anchor" href="#小结-1" aria-hidden="true">#</a></h3><ol><li><p>form表单做提交要依靠哪两个属性?</p><details><summary>答案</summary><ul><li> method和action </li></ul></details></li><li><p>form表单自我提交缺点是什么?</p><details><summary>答案</summary><ul><li> 整个网页跳转, 体验不好, 所以很少使用 </li></ul></details></li></ol><h2 id="语法-表单ajax提交" tabindex="-1">语法-表单Ajax提交 <a class="header-anchor" href="#语法-表单ajax提交" aria-hidden="true">#</a></h2><h3 id="目标-2" tabindex="-1">目标 <a class="header-anchor" href="#目标-2" aria-hidden="true">#</a></h3><p>掌握表单配合Ajax提交</p><h3 id="思路" tabindex="-1">思路 <a class="header-anchor" href="#思路" aria-hidden="true">#</a></h3><p>表单的默认提交效果不好（有页面刷新），我们直接用ajax的方式来提交。</p><ol><li>给按钮添加点击事件的回调。</li><li>在回调函数中发请求</li></ol><h3 id="基础代码" tabindex="-1">基础代码 <a class="header-anchor" href="#基础代码" aria-hidden="true">#</a></h3><p>新建<code>表单Ajax提交.html</code>文件, 把上个文件的表单复制过来, 并去掉action和method属性和值</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;语法_表单Ajax提交&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">&lt;!-- 用户名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;用户名：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">&lt;!-- 密码： --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;登录密码：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">&lt;!-- 提交按钮 给按钮补充id属性，方便dom获取--&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;">&gt;提交&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h3 id="核心代码" tabindex="-1">核心代码 <a class="header-anchor" href="#核心代码" aria-hidden="true">#</a></h3><p>引入axios, 绑定js代码实现提交的过程</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 点击登录按钮, 表单_Ajax提交</span></span>
<span class="line"><span style="color:#8B949E;">// url地址: http://ajax-api.itheima.net/api/data</span></span>
<span class="line"><span style="color:#8B949E;">// 方式: POST</span></span>
<span class="line"><span style="color:#8B949E;">// 1. 提交按钮-&gt;绑定点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#submit&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, (</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 阻止表单内button按钮默认提交行为</span></span>
<span class="line"><span style="color:#C9D1D9;">    e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 收集表单的值</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> username </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;input[name=username]&#39;</span><span style="color:#C9D1D9;">).value</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> password </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;input[name=password]&#39;</span><span style="color:#C9D1D9;">).value</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 4. 使用axios发送表单数据给接口</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/data&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        data: {</span></span>
<span class="line"><span style="color:#C9D1D9;">            username: username,</span></span>
<span class="line"><span style="color:#C9D1D9;">            password: password</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="小结-2" tabindex="-1">小结 <a class="header-anchor" href="#小结-2" aria-hidden="true">#</a></h3><ol><li><p>如何阻止表单内部按钮的默认提交动作？</p><details><summary>答案</summary><ul><li> e.preventDefault() </li></ul></details></li></ol><h2 id="语法-表单整体获取" tabindex="-1">语法-表单整体获取 <a class="header-anchor" href="#语法-表单整体获取" aria-hidden="true">#</a></h2><h3 id="目标-3" tabindex="-1">目标 <a class="header-anchor" href="#目标-3" aria-hidden="true">#</a></h3><p>能使用form-serialize插件, 提取整个表单数据</p><h3 id="提问" tabindex="-1">提问 <a class="header-anchor" href="#提问" aria-hidden="true">#</a></h3><p>之前一个个标签获取, 如果表单中的表单项目比较多，获取很慢, 有没有解决方案呢?</p><p>答: 使用<code>form-serialize.js</code>插件</p><h3 id="form-serialize的基本使用" tabindex="-1">form-serialize的基本使用 <a class="header-anchor" href="#form-serialize的基本使用" aria-hidden="true">#</a></h3><ol><li>引入form-serialize.js</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">&lt;!-- 引入serialize --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;省略其他/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 用户名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;用户名：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 密码： --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;登录密码：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">&lt;!-- 提交按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;">&gt;提交&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><ol start="2"><li>写js代码。直接调用serialize方法。</li></ol><p><strong>格式</strong>：</p><ul><li>格式1： <code>serialize(form标签)</code> 返回值是：查询字符串的格式</li><li>格式2：<code>serialize(form标签, { hash: true })</code> 返回值是： json对象</li></ul><p><strong>示例</strong></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(form标签) </span></span>
<span class="line"><span style="color:#8B949E;">// 返回值: 参数名=值&amp;参数名=值</span></span>
<span class="line"><span style="color:#8B949E;">// 例如: &#39;username=admin&amp;password=123456&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(form标签, { hash: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;"> }) </span></span>
<span class="line"><span style="color:#8B949E;">// 返回值: { 参数名: 值, 参数名: 值 }</span></span>
<span class="line"><span style="color:#8B949E;">// 例如: { username: &#39;admin&#39;, password: &#39;123456&#39; }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 参数名: 指的就是表单域name属性的值(也是后端要使用的参数名)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="实操" tabindex="-1">实操 <a class="header-anchor" href="#实操" aria-hidden="true">#</a></h3><p>在代码里获取第二种形式, 再利用axios提交感受下</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 目标: 点击登录按钮, 表单_整体获取_Ajax提交</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#submit&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, (</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 1. 借助serialize插件的方法, 把form表单里每个表单域name值和value值收集</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 2. 收集成参数名=值&amp;参数名=值的格式字符串</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> theFormEl </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;form&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// let formObj = serialize(theFormEl)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(formObj) // username=admin&amp;password=123456</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 3. 收集成{ 参数名: 值, 参数名: 值 }的格式对象</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> formObj </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(theFormEl, { hash: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;"> })</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(formObj) </span><span style="color:#8B949E;">// {username: &#39;admin&#39;, password: &#39;123456&#39;}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">            url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/data&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">            method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">            data: formObj</span></span>
<span class="line"><span style="color:#C9D1D9;">        })</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="小结-3" tabindex="-1">小结 <a class="header-anchor" href="#小结-3" aria-hidden="true">#</a></h3><ol><li><p>如何获取表单整体的参数名和值?</p><details><summary>答案</summary><ul><li> 先引入form-serialize库 </li><li> 再使用serialize方法传入form标签即可 </li></ul></details></li><li><p>serialize的两种方法，如何选择？</p><details><summary>答案</summary><ul><li> 取决于接口文档的要求。 </li></ul></details></li></ol><h2 id="案例-表单提交" tabindex="-1">案例-表单提交 <a class="header-anchor" href="#案例-表单提交" aria-hidden="true">#</a></h2><h3 id="目标-4" tabindex="-1">目标 <a class="header-anchor" href="#目标-4" aria-hidden="true">#</a></h3><p>完成登录表单的整体提交 <img src="/tingweipeng/assets/1667965838628-7191962e-f1f5-4566-8baa-ef40b0cc0840.fe2b4ade.gif" alt="案例_表单提交.gif" data-fancybox="gallery"></p><h3 id="讲解" tabindex="-1">讲解 <a class="header-anchor" href="#讲解" aria-hidden="true">#</a></h3><p>新建<code>案例_表单提交.html</code>, 准备如下标签和样式, 直接复制, 在这个基础上写</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;05.案例_表单提交&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f8f8f8</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">.login-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">400</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">position</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">fixed</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translateX</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">-50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">border</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">solid</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#efefef</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#cfcfcf</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">background-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: box-shadow </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ease</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">.login-box:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: box-shadow </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ease</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">#cfcfcf</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;login-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;myForm&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-group&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">for</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;Account&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                </span><span style="color:#8B949E;">&lt;!-- 账号 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autocomplete</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;off&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;emailHelp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-text text-muted&quot;</span><span style="color:#C9D1D9;">&gt;The available account is</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;admin&lt;/</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-group&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                </span><span style="color:#8B949E;">&lt;!-- 密码 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">for</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;Password&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;emailHelp&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-text text-muted&quot;</span><span style="color:#C9D1D9;">&gt;The available password is</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;123456&lt;/</span><span style="color:#7EE787;">strong</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">small</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnLogin&quot;</span><span style="color:#C9D1D9;">&gt;Submit&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br></div></div><ol start="2"><li>实现点击登录按钮, 调用登录接口, 返回结果用alert提示</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 用整体获取插件, 完成登录的表单提交效果</span></span>
<span class="line"><span style="color:#8B949E;">// 请求地址: http://ajax-api.itheima.net/api/login</span></span>
<span class="line"><span style="color:#8B949E;">// 请求方式: POST</span></span>
<span class="line"><span style="color:#8B949E;">// 参数: { username: 用户名, password:密码 }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 1. 提交按钮, 点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnLogin&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 整体获取登录表单参数名和值对象</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> formObj </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#myForm&#39;</span><span style="color:#C9D1D9;">), { hash: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;"> })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 使用axios发送请求，之后根据响应结果，做提示</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/login&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">, </span></span>
<span class="line"><span style="color:#C9D1D9;">        data: formObj</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(res.message)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">catch</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">err</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;登录失败&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="小结-4" tabindex="-1">小结 <a class="header-anchor" href="#小结-4" aria-hidden="true">#</a></h3><h2 id="语法-formdata基本使用" tabindex="-1">语法-FormData基本使用 <a class="header-anchor" href="#语法-formdata基本使用" aria-hidden="true">#</a></h2><h3 id="目标-5" tabindex="-1">目标 <a class="header-anchor" href="#目标-5" aria-hidden="true">#</a></h3><p>掌握FormData表单数据对象使用</p><h3 id="什么是formdata" tabindex="-1">什么是FormData <a class="header-anchor" href="#什么是formdata" aria-hidden="true">#</a></h3><p>FormData 是浏览器提供的一个 api，它以键值对的方式存储数据</p><p>场景：FormData + Ajax 技术实现文件上传的功能。</p><h3 id="基本语法格式" tabindex="-1">基本语法格式 <a class="header-anchor" href="#基本语法格式" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 1. 创建一个FormData对象</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> fd </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#8B949E;">// 2. 向对象中添加 数据</span></span>
<span class="line"><span style="color:#8B949E;">//    FormData.append(属性名, 属性值)</span></span>
<span class="line"><span style="color:#8B949E;">// 示例:</span></span>
<span class="line"><span style="color:#C9D1D9;">fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;name&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;小马&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>FormData 是一个构造函数，new FormData() 即可得到 FormData 对象：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;">  </span><span style="color:#79C0FF;">fd</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">() </span><span style="color:#8B949E;">// 创建一个空白的 FormData 对象，里面没有包含任何数据。</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>调用 FormData 对象的 append(键, 值) 方法，可以向空白的 FormData 中追加键值对数据</p><p>其中：</p><ul><li><p>键表示数据项的名字，必须是字符串</p></li><li><p>值表示数据项的值，可以是任意类型的数据</p></li></ul><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;username&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;张三&#39;</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 键是 username，值是字符串类型</span></span>
<span class="line"><span style="color:#C9D1D9;">fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;age&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">)                  </span><span style="color:#8B949E;">// 键是 age，           值是数字类型</span></span>
<span class="line"><span style="color:#C9D1D9;">fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;avatar&#39;</span><span style="color:#C9D1D9;">, 图片文件)  </span><span style="color:#8B949E;">// 键是 avatar，       值是文件类型</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="示例代码" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      目标：掌握 FormData() 的基本用法</span></span>
<span class="line"><span style="color:#8B949E;">      语法：</span></span>
<span class="line"><span style="color:#8B949E;">        1. const fd = new FormData() 创建 实例化对象</span></span>
<span class="line"><span style="color:#8B949E;">        2. fd.append(key,value) </span></span>
<span class="line"><span style="color:#8B949E;">      应用场景：使用 ajax 实现文件上传到服务器 需要使用 FormData()</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fd</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;uname&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;张三&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;age&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// console.log(fd)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 将 保存在 FormData 里面的数据打印出来</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// console.log(...fd)</span></span>
<span class="line"><span style="color:#C9D1D9;">    fd.</span><span style="color:#D2A8FF;">forEach</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">value</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">key</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(value, key)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="小结-5" tabindex="-1">小结 <a class="header-anchor" href="#小结-5" aria-hidden="true">#</a></h3><ol><li><p>什么是FormData?</p><details><summary>答案</summary><ul><li> 以键值对形式存放数据的容器, 常用于**装载文件对象** </li></ul></details></li><li><p>FormData如何使用?</p><details><summary>答案</summary><ul><li>实例化一个对象，用它的append方法加入参数名和值 </li></ul></details></li></ol><h2 id="使用formdata保存文件的信息" tabindex="-1">使用FormData保存文件的信息 <a class="header-anchor" href="#使用formdata保存文件的信息" aria-hidden="true">#</a></h2><h3 id="目标-6" tabindex="-1">目标 <a class="header-anchor" href="#目标-6" aria-hidden="true">#</a></h3><p>能够使用FormData保存文件的信息</p><h3 id="步骤" tabindex="-1">步骤 <a class="header-anchor" href="#步骤" aria-hidden="true">#</a></h3><ol><li>获取文件选择框</li><li>注册<code>change</code>事件</li><li>实例化<code>FormData</code>对象</li><li>将文件信息保存到 fd 对象里面</li></ol><h3 id="示例代码-1" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-1" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">&lt;!-- multiple 可以让 文件选择框 选择多个文件 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      需求：通过 FormData 收集 文件信息</span></span>
<span class="line"><span style="color:#8B949E;">        文件选择器 注册的 change  事件 内容发生改变  change 事件 存在 只有内容发生变化时 事件才会触发</span></span>
<span class="line"><span style="color:#8B949E;">        如何收集到 文件信息呢？ fileList</span></span>
<span class="line"><span style="color:#8B949E;">        通过 File API，我们可以访问 FileList，它包含了表示用户所选文件的 File 对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#file&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;change&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(1)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.dir(this)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(this.files[0])</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1. 得到 FormData 实例化对象</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fd</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2. 将文件信息 保存到 fd 对象里面</span></span>
<span class="line"><span style="color:#C9D1D9;">      fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;img&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.files[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">])</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">...</span><span style="color:#C9D1D9;">fd)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// this.value = &#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt; </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><h2 id="案例-头像上传-整体分析" tabindex="-1">案例-头像上传-整体分析 <a class="header-anchor" href="#案例-头像上传-整体分析" aria-hidden="true">#</a></h2><h3 id="目标-7" tabindex="-1">目标 <a class="header-anchor" href="#目标-7" aria-hidden="true">#</a></h3><p>能使用formData来实现头像上传并回显 ，掌握按钮关联隐藏文件选择器能力 <img src="/tingweipeng/assets/1667965871566-31d55d91-b8f3-447f-930d-d9e2d64a61f4.e1d4d601.gif" alt="案例_头像上传.gif" data-fancybox="gallery"></p><h3 id="整体要求" tabindex="-1">整体要求 <a class="header-anchor" href="#整体要求" aria-hidden="true">#</a></h3><ol><li>点击按钮，弹出文件选择框</li><li>用户在文件选择框中选中文件</li><li>点击文件选择框的确认按钮，用ajax技术上传</li><li>将上传后的文件进行预览</li></ol><h3 id="静态结构" tabindex="-1">静态结构 <a class="header-anchor" href="#静态结构" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例-头像上传&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap-v4.6.0.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">object-fit</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cover</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thumb-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头像 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./images/cover.jpg&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img-thumbnail thumb&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mt-2&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 文件选择框 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- accept 属性表示可选择的文件类型 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- image/* 表示只允许选择图片类型的文件 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;iptFile&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">accept</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;image/*&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">style</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;display: none;&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 选择头像图片的按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnChoose&quot;</span><span style="color:#C9D1D9;">&gt;选择 &amp; 上传图片&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 接口地址 http://ajax-api.itheima.net/api/file</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> btnChoose </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnChoose&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> iptFile </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#iptFile&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> img </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.thumb&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div><h2 id="案例-头像上传-点击按钮弹出文件选择框" tabindex="-1">案例-头像上传-点击按钮弹出文件选择框 <a class="header-anchor" href="#案例-头像上传-点击按钮弹出文件选择框" aria-hidden="true">#</a></h2><h3 id="目标-8" tabindex="-1">目标 <a class="header-anchor" href="#目标-8" aria-hidden="true">#</a></h3><p>能够实现点击按钮弹出文件选择框</p><h3 id="步骤-1" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-1" aria-hidden="true">#</a></h3><ol><li>给按钮注册点击事件</li><li>触发文件选择框的点击事件</li></ol><h3 id="核心代码-1" tabindex="-1">核心代码 <a class="header-anchor" href="#核心代码-1" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例-头像上传&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap-v4.6.0.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">object-fit</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cover</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thumb-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头像 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./images/cover.jpg&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img-thumbnail thumb&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mt-2&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 文件选择框 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- accept 属性表示可选择的文件类型 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- image/* 表示只允许选择图片类型的文件 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;iptFile&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">accept</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;image/*&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">hidden</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 选择头像图片的按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnChoose&quot;</span><span style="color:#C9D1D9;">&gt;选择 &amp; 上传图片&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 接口地址 http://ajax-api.itheima.net/api/file</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> btnChoose </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnChoose&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> iptFile </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#iptFile&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> img </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.thumb&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 点击按钮，弹出文件选择框</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 给按钮 注册 点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 触发 文件选择框的点击事件 相当于 点击了 文件选择框 </span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 给按钮 注册 点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    btnChoose.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 触发 文件选择框的点击事件 相当于 点击了 文件选择框 </span></span>
<span class="line"><span style="color:#C9D1D9;">      iptFile.</span><span style="color:#D2A8FF;">click</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br></div></div><h2 id="案例-头像上传-选择文件并上传到服务器" tabindex="-1">案例-头像上传-选择文件并上传到服务器 <a class="header-anchor" href="#案例-头像上传-选择文件并上传到服务器" aria-hidden="true">#</a></h2><h3 id="目标-9" tabindex="-1">目标 <a class="header-anchor" href="#目标-9" aria-hidden="true">#</a></h3><p>能够实现将选择后的文件上传到服务器</p><h3 id="步骤-2" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-2" aria-hidden="true">#</a></h3><ol><li>给文件选择框注册<code>change</code>事件</li><li>获取到文件的信息 <code>文件选择框.files[0]</code></li><li>将 文件信息 保存到 FormData</li><li>发送 ajax 到服务器</li></ol><h3 id="示例代码-2" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-2" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例-头像上传&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap-v4.6.0.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">object-fit</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cover</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thumb-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头像 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./images/cover.jpg&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img-thumbnail thumb&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mt-2&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 文件选择框 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- accept 属性表示可选择的文件类型 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- image/* 表示只允许选择图片类型的文件 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;iptFile&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">accept</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;image/*&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">hidden</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 选择头像图片的按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnChoose&quot;</span><span style="color:#C9D1D9;">&gt;选择 &amp; 上传图片&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 在线接口文档：https://www.showdoc.com.cn/ajaxapi/3754974183518732</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 接口地址 http://ajax-api.itheima.net/api/file</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> btnChoose </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnChoose&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> iptFile </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#iptFile&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> img </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.thumb&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 点击按钮，弹出文件选择框</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 给按钮 注册 点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 触发 文件选择框的点击事件 相当于 点击了 文件选择框 </span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      2. 实现文件的上传功能</span></span>
<span class="line"><span style="color:#8B949E;">        2.1 需要给 iptFile 注册 change 事件</span></span>
<span class="line"><span style="color:#8B949E;">        2.2 需要获取到 文件的信息 文件选择框.files[0]</span></span>
<span class="line"><span style="color:#8B949E;">        2.3 将 文件信息 保存到 FormData</span></span>
<span class="line"><span style="color:#8B949E;">        2.4 发送 ajax 到服务器即可</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 需要：实现文件上传后 预览的效果</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   找到 img 标签 将 上传成功后的 url 地址 赋值给 img 标签 src 属性</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 给按钮 注册 点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    btnChoose.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 触发 文件选择框的点击事件 相当于 点击了 文件选择框 </span></span>
<span class="line"><span style="color:#C9D1D9;">      iptFile.</span><span style="color:#D2A8FF;">click</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2.1 需要给 iptFile 注册 change 事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    iptFile.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;change&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.2 需要获取到 文件的信息 文件选择框.files[0]</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">file</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> iptFile.files[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(file)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.3 将 文件信息 保存到 FormData</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fd</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// key 需要参考接口文档</span></span>
<span class="line"><span style="color:#C9D1D9;">      fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;avatar&#39;</span><span style="color:#C9D1D9;">, file)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.4 发送 ajax 到服务器即可</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/file&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;post&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        data: fd</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 为了解决 change 事件的 内容没有发生的改变的问题</span></span>
<span class="line"><span style="color:#C9D1D9;">      iptFile.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br></div></div><h2 id="案例-头像上传-文件预览功能" tabindex="-1">案例-头像上传-文件预览功能 <a class="header-anchor" href="#案例-头像上传-文件预览功能" aria-hidden="true">#</a></h2><h3 id="目标-10" tabindex="-1">目标 <a class="header-anchor" href="#目标-10" aria-hidden="true">#</a></h3><p>能够实现文件预览功能</p><h3 id="步骤-3" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-3" aria-hidden="true">#</a></h3><p>将服务器响应回来的图片进行预览</p><h3 id="示例代码-3" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-3" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例-头像上传&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap-v4.6.0.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb-box</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.thumb</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">250</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">object-fit</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cover</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-radius</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;thumb-box&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- 头像 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./images/cover.jpg&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;img-thumbnail thumb&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mt-2&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 文件选择框 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- accept 属性表示可选择的文件类型 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- image/* 表示只允许选择图片类型的文件 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;iptFile&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">accept</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;image/*&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">hidden</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 选择头像图片的按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btnChoose&quot;</span><span style="color:#C9D1D9;">&gt;选择 &amp; 上传图片&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 在线接口文档：https://www.showdoc.com.cn/ajaxapi/3754974183518732</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 接口地址 http://ajax-api.itheima.net/api/file</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> btnChoose </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btnChoose&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> iptFile </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#iptFile&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> img </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.thumb&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      1. 点击按钮，弹出文件选择框</span></span>
<span class="line"><span style="color:#8B949E;">        1.1 给按钮 注册 点击事件</span></span>
<span class="line"><span style="color:#8B949E;">        1.2 触发 文件选择框的点击事件 相当于 点击了 文件选择框 </span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      2. 实现文件的上传功能</span></span>
<span class="line"><span style="color:#8B949E;">        2.1 需要给 iptFile 注册 change 事件</span></span>
<span class="line"><span style="color:#8B949E;">        2.2 需要获取到 文件的信息 文件选择框.files[0]</span></span>
<span class="line"><span style="color:#8B949E;">        2.3 将 文件信息 保存到 FormData</span></span>
<span class="line"><span style="color:#8B949E;">        2.4 发送 ajax 到服务器即可</span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 需要：实现文件上传后 预览的效果</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   找到 img 标签 将 上传成功后的 url 地址 赋值给 img 标签 src 属性</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1.1 给按钮 注册 点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    btnChoose.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 1.2 触发 文件选择框的点击事件 相当于 点击了 文件选择框 </span></span>
<span class="line"><span style="color:#C9D1D9;">      iptFile.</span><span style="color:#D2A8FF;">click</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2.1 需要给 iptFile 注册 change 事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    iptFile.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;change&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.2 需要获取到 文件的信息 文件选择框.files[0]</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">file</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> iptFile.files[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(file)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.3 将 文件信息 保存到 FormData</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fd</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// key 需要参考接口文档</span></span>
<span class="line"><span style="color:#C9D1D9;">      fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;avatar&#39;</span><span style="color:#C9D1D9;">, file)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2.4 发送 ajax 到服务器即可</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/file&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;post&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        data: fd</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 找到 img 标签 将 上传成功后的 url 地址 赋值给 img 标签 src 属性</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// img.src = res.data.url</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// alert(res.message)</span></span>
<span class="line"><span style="color:#C9D1D9;">        img.src </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.url</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 为了解决 change 事件的 内容没有发生的改变的问题</span></span>
<span class="line"><span style="color:#C9D1D9;">      iptFile.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br></div></div><h2 id="概念-请求体类型" tabindex="-1">概念-请求体类型 <a class="header-anchor" href="#概念-请求体类型" aria-hidden="true">#</a></h2><h3 id="目标-11" tabindex="-1">目标 <a class="header-anchor" href="#目标-11" aria-hidden="true">#</a></h3><p>了解请求体的3种常用类型和场景</p><h3 id="content-type" tabindex="-1">content-type <a class="header-anchor" href="#content-type" aria-hidden="true">#</a></h3><p>前面刚讲的几个代码和接口效果, 仔细观察请求报文-&gt;请求头中的Content-Type字段，用来标记请求体内容的类型</p><p>axios自动根据data值的类型, 帮我们自动设置的</p><h3 id="_3种content-type" tabindex="-1">3种content-type <a class="header-anchor" href="#_3种content-type" aria-hidden="true">#</a></h3><p><img src="/tingweipeng/assets/1667965896105-6e5b5a8d-0b3c-42f9-9d9f-c9d7ecc937d2.291a3cd7.png" alt="image.png" data-fancybox="gallery"></p><h3 id="类型1" tabindex="-1">类型1 <a class="header-anchor" href="#类型1" aria-hidden="true">#</a></h3><p><code>application/x-www-form-urlencoded</code>，格式：&#39;参数名=值&amp;参数名=值&#39;</p><p><img src="/tingweipeng/assets/image-20230203215220426.9b9edcb6.png" alt="image-20230203215220426" data-fancybox="gallery"></p><h3 id="类型2" tabindex="-1">类型2 <a class="header-anchor" href="#类型2" aria-hidden="true">#</a></h3><p><code>application/json</code>，格式：&#39;{&quot;参数名&quot;: 值, &quot;参数名&quot;: 值}&#39; 的json字符串</p><p><img src="/tingweipeng/assets/image-20230203215345437.f9a8eec5.png" alt="image-20230203215345437" data-fancybox="gallery"></p><h3 id="类型3" tabindex="-1">类型3 <a class="header-anchor" href="#类型3" aria-hidden="true">#</a></h3><p><code>multipart/form-data</code>，格式：分隔符加参数名和值 （分割符浏览器自动生成）</p><p><img src="/tingweipeng/assets/image-20230203215502534.ea9c1562.png" alt="image-20230203215502534" data-fancybox="gallery"></p><p>在2个输入框的情况下, 编写代码, 请求表单上传接口, 传递3种不同的请求体类型值给服务器, 观察network区别</p><h3 id="示例代码-4" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-4" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;请求体类型&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 用户名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;账号：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;username&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 密码： --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;密码：&lt;/</span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;password&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- 提交按钮 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;提交&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 目标: 学习3种不同请求体内容类型</span></span>
<span class="line"><span style="color:#8B949E;">// 接口地址: http://ajax-api.itheima.net/api/data</span></span>
<span class="line"><span style="color:#8B949E;">// 请求方式: POST</span></span>
<span class="line"><span style="color:#8B949E;">// 参数名: 随意</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 检测form表单提交行为</span></span>
<span class="line"><span style="color:#C9D1D9;">document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;form&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;submit&#39;</span><span style="color:#C9D1D9;">, (</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 阻止默认提交, 换Ajax自己写提交观察请求体内容类型</span></span>
<span class="line"><span style="color:#C9D1D9;">    e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 情况1: 参数名=值&amp;参数名=值 的字符串</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// let data = serialize(e.target)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 情况2: JSON字符串上传</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// let data = serialize(e.target, { hash: true })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 情况3: multipart/form-data 表单数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> data </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    data.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;username&#39;</span><span style="color:#C9D1D9;">, document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;input[name=username]&#39;</span><span style="color:#C9D1D9;">).value)</span></span>
<span class="line"><span style="color:#C9D1D9;">    data.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;password&#39;</span><span style="color:#C9D1D9;">, document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;input[name=password]&#39;</span><span style="color:#C9D1D9;">).value)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/data&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        data: data</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 总结:</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 请求头Content-Type类型                    请求体值格式</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. application/x-www-form-urlencoded     参数名=值&amp;参数名=值 的字符串</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. application/json                      &#39;{&quot;参数名&quot;: 值, &quot;参数名&quot;: 值} 的json字符串</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. multipart/form-data                   FormData表单数据(常用携带文件)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br></div></div><ol><li>编写js代码</li></ol><h3 id="小结-6" tabindex="-1">小结 <a class="header-anchor" href="#小结-6" aria-hidden="true">#</a></h3><ol><li><p>请求体类型常用的有哪3种?</p><details><summary>答案</summary><ul><li> 参数名=值&amp;参数名=值格式的字符串 </li><li> JSON格式的字符串 </li><li> 带分隔符的表单数据对象 </li></ul></details></li><li><p>请求头中的content-type有什么作用？</p><details><summary>答案</summary><ul><li> 用来标记请求体内容的类型 </li></ul></details></li></ol><h2 id="案例-图书管理-获取数据并渲染" tabindex="-1">案例-图书管理-获取数据并渲染 <a class="header-anchor" href="#案例-图书管理-获取数据并渲染" aria-hidden="true">#</a></h2><h3 id="目标-12" tabindex="-1">目标 <a class="header-anchor" href="#目标-12" aria-hidden="true">#</a></h3><p>把图书列表的数据铺设到页面上 <img src="/tingweipeng/assets/1667965953828-3ccac63d-5358-4a3f-93d2-21cd1415b7cc.c2cda3b6.png" alt="image.png" data-fancybox="gallery"></p><h3 id="步骤-4" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-4" aria-hidden="true">#</a></h3><ol><li>定义函数 <code>getBooks</code></li><li>发送ajax</li><li>渲染数据</li><li>调用函数</li></ol><h3 id="示例代码-5" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-5" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;11.案例_图书管理_添加&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#79C0FF;">:root</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">15</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#79C0FF;">padding-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">15</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">		}</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#8B949E;">&lt;!-- 栅格系统 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;container&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;d-flex justify-content-between align-items-center&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;图书管理&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-success btn-sm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-toggle</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;myAddBtn&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-target</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;#addModal&quot;</span><span style="color:#C9D1D9;">&gt;添加&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">table</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;table table-bordered table-striped table-dark table-hover text-center&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">thead</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">&lt;!-- 表头行 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;Id&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;操作&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">thead</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">tbody</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">&lt;!-- 表格中的每一行 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">&lt;!-- &lt;tr&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;th scope=&quot;row&quot;&gt;xxx&lt;/th&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;xxx&lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;xxx&lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;xxx&lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                        &lt;button type=&quot;button&quot; class=&quot;btn btn-link btn-sm btn-delete&quot;&gt;删除&lt;/button&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                        &lt;button type=&quot;button&quot; class=&quot;btn btn-link btn-sm btn-update&quot;&gt;编辑&lt;/button&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                &lt;/tr&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">tbody</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">table</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#8B949E;">&lt;!-- add Modal --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal fade&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;addModal&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-dialog&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-content&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-title&quot;</span><span style="color:#C9D1D9;">&gt;添加图书&lt;/</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn-close&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">aria-label</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;Close&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;addForm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;p-3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autocomplete</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;off&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-body&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 书名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入图书名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 作者 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入作者名字&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 出版社 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入出版社名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-secondary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;">&gt;取消&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;addBtn&quot;</span><span style="color:#C9D1D9;">&gt;确认&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#8B949E;">&lt;!-- edit Modal --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal fade&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;editModal&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-dialog&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-content&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-title&quot;</span><span style="color:#C9D1D9;">&gt;编辑图书&lt;/</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn-close&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">aria-label</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;Close&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;editForm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;p-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-body&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;hidden&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 书名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入图书名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 作者 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入作者名字&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 出版社 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入出版社名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-secondary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;">&gt;取消&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;editBtn&quot;</span><span style="color:#C9D1D9;">&gt;确认&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">tbody</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;tbody&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getBooks</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">				url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/books&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">			}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">				tbody.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">					&lt;tr&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;th scope=&quot;row&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&lt;/th&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">bookname</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">author</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">publisher</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">								&lt;button type=&quot;button&quot; class=&quot;btn btn-link btn-sm btn-delete&quot; data-id=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot;&gt;删除&lt;/button&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">								&lt;button type=&quot;button&quot; class=&quot;btn btn-link btn-sm btn-update&quot; data-id=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot;&gt;编辑&lt;/button&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">					&lt;/tr&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">				`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">			})</span></span>
<span class="line"><span style="color:#C9D1D9;">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#D2A8FF;">getBooks</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br></div></div><h2 id="案例-图书管理-添加" tabindex="-1">案例-图书管理-添加 <a class="header-anchor" href="#案例-图书管理-添加" aria-hidden="true">#</a></h2><h3 id="目标-13" tabindex="-1">目标 <a class="header-anchor" href="#目标-13" aria-hidden="true">#</a></h3><p>准备输入框和按钮标签, 实现增加图书功能 <img src="/tingweipeng/assets/1667965989537-0f5693ad-d585-42db-8f98-919f0a1bf9d9.df5f77c7.gif" alt="添加.gif" data-fancybox="gallery"></p><h3 id="步骤-5" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-5" aria-hidden="true">#</a></h3><ol><li>点击「添加」按钮 打开 对应的 添加的 模态框 （学习 bootstrap官网）</li><li>获取添加图书的表单 注册 submit 事件</li><li>阻止表单的默认行为</li><li>获取表单的数据</li><li>发送ajax</li><li>关闭模态框</li><li>清空表单的数据</li><li>重新渲染页面</li></ol><p>如果忘记了BS的模态框使用, 请参考<a href="https://v5.bootcss.com/docs/components/modal/#passing-options" target="_blank" rel="noreferrer">文档</a></p><h3 id="示例代码-6" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-6" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">&lt;!</span><span style="color:#79C0FF;">DOCTYPE</span><span style="color:#C9D1D9;"> html</span><span style="color:#FF7B72;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;11.案例_图书管理_添加&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		:root </span><span style="color:#FF7B72;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">			font</span><span style="color:#FF7B72;">-</span><span style="color:#C9D1D9;">size: 15px;</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		body </span><span style="color:#FF7B72;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">			padding</span><span style="color:#FF7B72;">-</span><span style="color:#C9D1D9;">top: 15px;</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;!-- 栅格系统 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;container&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;d-flex justify-content-between align-items-center&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;图书管理&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-success btn-sm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-toggle</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;myAddBtn&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-target</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;#addModal&quot;</span><span style="color:#C9D1D9;">&gt;添加&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">table</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;table table-bordered table-striped table-dark table-hover text-center&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">thead</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;!-- 表头行 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;Id&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;操作&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">thead</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">tbody</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;!-- 表格中的每一行 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;!-- &lt;</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;row&quot;</span><span style="color:#C9D1D9;">&gt;xxx&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;xxx&lt;/</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;xxx&lt;/</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;xxx&lt;/</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                        &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-link btn-sm btn-delete&quot;</span><span style="color:#C9D1D9;">&gt;删除&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                        &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-link btn-sm btn-update&quot;</span><span style="color:#C9D1D9;">&gt;编辑&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                    &lt;/</span><span style="color:#7EE787;">td</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">                &lt;/</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">tbody</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">table</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;!-- add Modal --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal fade&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;addModal&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-dialog&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-content&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-title&quot;</span><span style="color:#C9D1D9;">&gt;添加图书&lt;/</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn-close&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">aria-label</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;Close&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;addForm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;p-3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autocomplete</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;off&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-body&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;!-- 书名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;请输入图书名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;!-- 作者 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;请输入作者名字&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;!-- 出版社 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;请输入出版社名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-secondary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;">&gt;取消&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;addBtn&quot;</span><span style="color:#C9D1D9;">&gt;确认&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;!-- edit Modal --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal fade&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;editModal&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-dialog&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-content&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-title&quot;</span><span style="color:#C9D1D9;">&gt;编辑图书&lt;/</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn-close&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">aria-label</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;Close&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;editForm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;p-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-body&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;hidden&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;!-- 书名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;请输入图书名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;!-- 作者 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;请输入作者名字&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;!-- 出版社 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;请输入出版社名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal-footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-secondary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;">&gt;取消&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;editBtn&quot;</span><span style="color:#C9D1D9;">&gt;确认&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#FF7B72;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		/*</span></span>
<span class="line"><span style="color:#C9D1D9;">			1. 查询所有的图书并显示到页面上</span></span>
<span class="line"><span style="color:#C9D1D9;">				1.1 一打开页面需要发送 ajax (建议封装函数) getBooksList</span></span>
<span class="line"><span style="color:#C9D1D9;">				1.2 渲染页面</span></span>
<span class="line"><span style="color:#C9D1D9;">		*/</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		const tbody = document.querySelector(&#39;tbody&#39;)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		const getBooksList = () =&gt; </span><span style="color:#FF7B72;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">				url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/books&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">				method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">			}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">				tbody.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">				&lt;tr&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;th scope=&quot;row&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&lt;/th&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">bookname</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">author</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">publisher</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">								&lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-sm btn-delete&quot; data-id=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot;&gt;删除&lt;/button&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">								&lt;button type=&quot;button&quot; class=&quot;btn btn-warning btn-sm btn-update&quot; data-id=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot;&gt;编辑&lt;/button&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">				&lt;/tr&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">				`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">			})</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		getBooksList()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		// 获取指定的模态框</span></span>
<span class="line"><span style="color:#C9D1D9;">		const addModal = new bootstrap.Modal(document.querySelector(&#39;#addModal&#39;))</span></span>
<span class="line"><span style="color:#C9D1D9;">		// 获取 添加的按钮 并注册点击事件 将 添加的模态框显示出来</span></span>
<span class="line"><span style="color:#C9D1D9;">		document.querySelector(&#39;#myAddBtn&#39;).addEventListener(&#39;click&#39;, function () </span><span style="color:#FF7B72;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">			addModal.</span><span style="color:#D2A8FF;">show</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">}</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		// 获取添加图书的表单 注册 submit 事件</span></span>
<span class="line"><span style="color:#C9D1D9;">		document.querySelector(&#39;#addForm&#39;).addEventListener(&#39;submit&#39;, function (e) </span><span style="color:#FF7B72;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">// 阻止表单的默认行为</span></span>
<span class="line"><span style="color:#C9D1D9;">			e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">// 获取表单的数据</span></span>
<span class="line"><span style="color:#C9D1D9;">			const data </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">, { hash: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;"> })</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">// console.log(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">// 发送ajax</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">				url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/books&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">				method: </span><span style="color:#A5D6FF;">&#39;post&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">				data</span></span>
<span class="line"><span style="color:#C9D1D9;">			}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// 关闭模态框</span></span>
<span class="line"><span style="color:#C9D1D9;">				addModal.</span><span style="color:#D2A8FF;">hide</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// 清空表单里面的数据</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.</span><span style="color:#D2A8FF;">reset</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// 重新渲染页面</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#D2A8FF;">getBooksList</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">			})</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">}</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br></div></div><h3 id="小结-7" tabindex="-1">小结 <a class="header-anchor" href="#小结-7" aria-hidden="true">#</a></h3><ol><li>新增图书思路是什么? <details><summary>答案</summary><ul><li> 显示弹框 </li><li> 发送ajax </li><li> 重新渲染数据 </li><li> 表单重置 </li><li> 关闭弹框 </li></ul></details></li></ol><h2 id="案例-图书管理-删除" tabindex="-1">案例-图书管理-删除 <a class="header-anchor" href="#案例-图书管理-删除" aria-hidden="true">#</a></h2><h3 id="目标-14" tabindex="-1">目标 <a class="header-anchor" href="#目标-14" aria-hidden="true">#</a></h3><p>完成删除图书功能 <img src="/tingweipeng/assets/1667966130803-26d86379-2c69-46b1-9c65-6949ac8c9b01.ab80da4e.gif" alt="删除.gif" data-fancybox="gallery"></p><h3 id="步骤-6" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-6" aria-hidden="true">#</a></h3><ol><li>使用事件委托 tbody</li><li>判断点击的是否是删除按钮</li><li>找到 删除按钮和编辑按钮添加自定义属性</li><li>获取 自定义属性值</li><li>发送ajax</li><li>重新渲染页面</li></ol><h3 id="示例代码-7" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-7" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;11.案例_图书管理_添加&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#79C0FF;">:root</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">15</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#79C0FF;">padding-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">15</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">		}</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#8B949E;">&lt;!-- 栅格系统 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;container&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;d-flex justify-content-between align-items-center&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;图书管理&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-success btn-sm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-toggle</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;myAddBtn&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-target</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;#addModal&quot;</span><span style="color:#C9D1D9;">&gt;添加&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">table</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;table table-bordered table-striped table-dark table-hover text-center&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">thead</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">&lt;!-- 表头行 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;Id&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">scope</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col&quot;</span><span style="color:#C9D1D9;">&gt;操作&lt;/</span><span style="color:#7EE787;">th</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">tr</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">thead</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">tbody</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">&lt;!-- 表格中的每一行 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">&lt;!-- &lt;tr&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;th scope=&quot;row&quot;&gt;xxx&lt;/th&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;xxx&lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;xxx&lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;xxx&lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                        &lt;button type=&quot;button&quot; class=&quot;btn btn-link btn-sm btn-delete&quot;&gt;删除&lt;/button&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                        &lt;button type=&quot;button&quot; class=&quot;btn btn-link btn-sm btn-update&quot;&gt;编辑&lt;/button&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                    &lt;/td&gt;</span></span>
<span class="line"><span style="color:#8B949E;">                &lt;/tr&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">tbody</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">table</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#8B949E;">&lt;!-- add Modal --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal fade&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;addModal&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-dialog&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-content&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-title&quot;</span><span style="color:#C9D1D9;">&gt;添加图书&lt;/</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn-close&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">aria-label</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;Close&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;addForm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;p-3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">autocomplete</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;off&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-body&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 书名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入图书名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 作者 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入作者名字&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 出版社 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入出版社名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-secondary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;">&gt;取消&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;addBtn&quot;</span><span style="color:#C9D1D9;">&gt;确认&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#8B949E;">&lt;!-- edit Modal --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal fade&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;editModal&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-dialog&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-content&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-header&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-title&quot;</span><span style="color:#C9D1D9;">&gt;编辑图书&lt;/</span><span style="color:#7EE787;">h5</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn-close&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">aria-label</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;Close&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;editForm&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;p-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-body&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;hidden&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 书名 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;书名&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入图书名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;bookname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 作者 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;作者&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入作者名字&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;author&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						</span><span style="color:#8B949E;">&lt;!-- 出版社 --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-label&quot;</span><span style="color:#C9D1D9;">&gt;出版社&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">							&lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">placeholder</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;请输入出版社名称&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;publisher&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal-footer&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;button&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-secondary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-bs-dismiss</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;modal&quot;</span><span style="color:#C9D1D9;">&gt;取消&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">						&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;submit&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;editBtn&quot;</span><span style="color:#C9D1D9;">&gt;确认&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">					&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">				&lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">			&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">			1. 查询所有的图书并显示到页面上</span></span>
<span class="line"><span style="color:#8B949E;">				1.1 一打开页面需要发送 ajax (建议封装函数) getBooksList</span></span>
<span class="line"><span style="color:#8B949E;">				1.2 渲染页面</span></span>
<span class="line"><span style="color:#8B949E;">		*/</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">tbody</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;tbody&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getBooksList</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">				url: </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/books&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">				method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">			}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">				tbody.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">				&lt;tr&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;th scope=&quot;row&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&lt;/th&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">bookname</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">author</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">publisher</span><span style="color:#A5D6FF;">}&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">								&lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-sm btn-delete&quot; data-id=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot;&gt;删除&lt;/button&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">								&lt;button type=&quot;button&quot; class=&quot;btn btn-warning btn-sm btn-update&quot; data-id=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}&quot;&gt;编辑&lt;/button&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">						&lt;/td&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">				&lt;/tr&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">				`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">			})</span></span>
<span class="line"><span style="color:#C9D1D9;">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#D2A8FF;">getBooksList</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">			2. 删除功能</span></span>
<span class="line"><span style="color:#8B949E;">				2.1 需要使用事件委托 将事件委托给 tbody</span></span>
<span class="line"><span style="color:#8B949E;">				2.2 需要判断点击的是否是删除按钮</span></span>
<span class="line"><span style="color:#8B949E;">				2.3 告诉后端 将被点击的这一条数据删除 ？ 找到 删除按钮和编辑按钮添加自定义属性 </span></span>
<span class="line"><span style="color:#8B949E;">				2.4 获取 自定义属性值</span></span>
<span class="line"><span style="color:#8B949E;">				2.5 发送ajax </span></span>
<span class="line"><span style="color:#8B949E;">				2.6 重新渲染页面 </span></span>
<span class="line"><span style="color:#8B949E;">		*/</span></span>
<span class="line"><span style="color:#C9D1D9;">		</span><span style="color:#8B949E;">// 2.1 需要使用事件委托 将事件委托给 tbody</span></span>
<span class="line"><span style="color:#C9D1D9;">		tbody.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">// 2.2 需要判断点击的是否是删除按钮</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">//   2.2.1 借助于 按钮的文字 来判断是否是 删除按钮 </span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">//   2.2.2 classList.contains(&#39;类名&#39;)</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#8B949E;">// console.log(e.target.classList.contains(&#39;btn-delete&#39;))</span></span>
<span class="line"><span style="color:#C9D1D9;">			</span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (e.target.classList.</span><span style="color:#D2A8FF;">contains</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;btn-delete&#39;</span><span style="color:#C9D1D9;">)) {</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// 获取 自定义属性值</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> e.target.dataset.id</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// console.log(id)</span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#8B949E;">// 2.5 发送ajax </span></span>
<span class="line"><span style="color:#C9D1D9;">				</span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">					url: </span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/books/${</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">					method: </span><span style="color:#A5D6FF;">&#39;delete&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">				}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">					</span><span style="color:#8B949E;">// console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">					</span><span style="color:#8B949E;">// 2.6 重新渲染页面 </span></span>
<span class="line"><span style="color:#C9D1D9;">					</span><span style="color:#D2A8FF;">getBooksList</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">				})</span></span>
<span class="line"><span style="color:#C9D1D9;">			}</span></span>
<span class="line"><span style="color:#C9D1D9;">		})</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">	&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br></div></div><h3 id="小结-8" tabindex="-1">小结 <a class="header-anchor" href="#小结-8" aria-hidden="true">#</a></h3><ol><li><p>什么是事件委托?</p><details><summary>答案</summary><ul><li> 把事件绑定在目标标签的父级/父级的父级等, 委托他们来实现事件绑定和监测 </li></ul></details></li><li><p>事件委托使用场景?</p><details><summary>答案</summary><ul><li> 当要给动态创建的标签绑定事件, 我们要考虑使用事件委托</li></ul></details></li></ol><h2 id="案例-图书管理-修改-回显数据" tabindex="-1">案例-图书管理-修改-回显数据 <a class="header-anchor" href="#案例-图书管理-修改-回显数据" aria-hidden="true">#</a></h2><h3 id="目标-15" tabindex="-1">目标 <a class="header-anchor" href="#目标-15" aria-hidden="true">#</a></h3><p>能写出图书管理案例的回显数据功能 <img src="/tingweipeng/assets/1667966060168-c428be07-e019-4b78-a329-928f338b8c49.ef70078e.gif" alt="编辑_回显.gif" data-fancybox="gallery"></p><h3 id="思路-1" tabindex="-1">思路 <a class="header-anchor" href="#思路-1" aria-hidden="true">#</a></h3><p>先点击编辑获取对应行图书的详细数据, 并做数据回显</p><h3 id="核心代码-2" tabindex="-1">核心代码 <a class="header-anchor" href="#核心代码-2" aria-hidden="true">#</a></h3><p>复制上一个html文件, 并改名<code>案例_图书管理_修改.html</code>, 然后新开一个script标签编写修改功能</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 编写出修改图书的功能</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">editModal</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> bootstrap.</span><span style="color:#D2A8FF;">Modal</span><span style="color:#C9D1D9;">(document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#editModal&#39;</span><span style="color:#C9D1D9;">))</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">editForm</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#editForm&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 1. 给tr里button绑定点击事件-&gt;发现不行-&gt;需要使用事件委托</span></span>
<span class="line"><span style="color:#C9D1D9;">document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;tbody&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 判断classList里是否包含btn-update类名, 才点在了编辑按钮身上</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (e.target.classList.</span><span style="color:#D2A8FF;">contains</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;btn-update&#39;</span><span style="color:#C9D1D9;">)) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 3. 拿到正在编辑的图书详情数据</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 需要给编辑按钮身上自定义属性, 从而拿到正在编辑的这行图书数据id</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">            url: </span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/books/${</span><span style="color:#C9D1D9;">e</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">target</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">dataset</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">            method: </span><span style="color:#A5D6FF;">&#39;GET&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">        }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> }) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#8B949E;">// 4. 编辑模态框出现, 做数据回显</span></span>
<span class="line"><span style="color:#C9D1D9;">            editModal.</span><span style="color:#D2A8FF;">show</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">            </span><span style="color:#FF7B72;">for</span><span style="color:#C9D1D9;"> (</span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">key</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">in</span><span style="color:#C9D1D9;"> res.data) {</span></span>
<span class="line"><span style="color:#C9D1D9;">                editForm.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`[name=${</span><span style="color:#C9D1D9;">key</span><span style="color:#A5D6FF;">}]`</span><span style="color:#C9D1D9;">).value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data[key]</span></span>
<span class="line"><span style="color:#C9D1D9;">            }</span></span>
<span class="line"><span style="color:#C9D1D9;">        })</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="小结-9" tabindex="-1">小结 <a class="header-anchor" href="#小结-9" aria-hidden="true">#</a></h3><ol><li>修改中数据回显的思路是什么? <details><summary>答案</summary><ul><li>发送ajax获取到某条数据的详细信息</li><li>显示到对应的标签的value属性值</li></ul></details></li></ol><h2 id="案例-图书管理-修改-数据保存" tabindex="-1">案例-图书管理-修改-数据保存 <a class="header-anchor" href="#案例-图书管理-修改-数据保存" aria-hidden="true">#</a></h2><h3 id="目标-16" tabindex="-1">目标 <a class="header-anchor" href="#目标-16" aria-hidden="true">#</a></h3><p>能写出修改图书的功能代码 <img src="/tingweipeng/assets/1667966098756-5bac85ca-ec6d-42dc-b225-d2194290003a.1e8165d2.gif" alt="编辑_完成.gif" data-fancybox="gallery"></p><h3 id="讲解-1" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-1" aria-hidden="true">#</a></h3><p>在上个案例的代码基础上接着写</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 5. 给编辑的模态框里确定按钮, 绑定点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#editBtn&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 6. 收集最新表单里的值</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> formObj </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(editForm, { hash: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;"> })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 7. 基于axios发给服务器更新</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// formObj因为表单里准备了个隐藏的name叫id的域</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 专门接收正在要编辑的图书id所以这里formObj.id即可</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/books/${</span><span style="color:#C9D1D9;">formObj</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">id</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        method: </span><span style="color:#A5D6FF;">&#39;PUT&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        data: formObj</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 8. 更新成功后, 重新请求数据铺设, 并让编辑框清空并关闭</span></span>
<span class="line"><span style="color:#C9D1D9;">        editForm.</span><span style="color:#D2A8FF;">reset</span><span style="color:#C9D1D9;">() </span><span style="color:#8B949E;">// 触发form的原生事件方法让它重置</span></span>
<span class="line"><span style="color:#C9D1D9;">        editModal.</span><span style="color:#D2A8FF;">hide</span><span style="color:#C9D1D9;">() </span><span style="color:#8B949E;">// 触发BS内置方法, 让BS的模块框消失</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">setBooksListFn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="小结-10" tabindex="-1">小结 <a class="header-anchor" href="#小结-10" aria-hidden="true">#</a></h3><ol><li>完成修改功能的完整思路是? <details><summary>答案</summary><ul><li> 获取数据，发请求 </li><li> 渲染数据 </li><li> 重置表单 </li><li> 关闭弹框 </li></ul></details></li></ol><h2 id="语法-axios优化写法" tabindex="-1">语法-axios优化写法 <a class="header-anchor" href="#语法-axios优化写法" aria-hidden="true">#</a></h2><h3 id="目标-17" tabindex="-1">目标 <a class="header-anchor" href="#目标-17" aria-hidden="true">#</a></h3><p>设置axios基地址配置，优化axios的写法</p><h3 id="优化1-axios全局配置" tabindex="-1">优化1: axios全局配置 <a class="header-anchor" href="#优化1-axios全局配置" aria-hidden="true">#</a></h3><p>每次请求地址, 接口文档只有后半段, 原因是所有前面的基础地址相同 。所以axios提供了一个全局的属性defaults.baseURL, 在每次axios函数发请求时, 具体请求的地址为&quot;baseURL值+url值&quot; 。</p><p>语法: <code>axios.defaults.baseURL = &#39;前缀基础地址&#39;</code> (简称基地址)</p><p>直接对axios本身进行设置</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: axios可以提前设置一个基地址</span></span>
<span class="line"><span style="color:#8B949E;">// 知识点: 函数也是对象</span></span>
<span class="line"><span style="color:#8B949E;">// 前缀地址(基地址)</span></span>
<span class="line"><span style="color:#C9D1D9;">axios.defaults.baseURL </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="优化2-默认的method" tabindex="-1">优化2: 默认的method <a class="header-anchor" href="#优化2-默认的method" aria-hidden="true">#</a></h3><p>axios请求时, method选项, 内部默认用&quot;GET&quot;方式, 所以也可以省略不写</p><h3 id="优化3-axios的快捷方法" tabindex="-1">优化3: axios的快捷方法 <a class="header-anchor" href="#优化3-axios的快捷方法" aria-hidden="true">#</a></h3><p>还有一些请求方式的方法可以直接使用例如语法为:</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 下面两种写法是等价的</span></span>
<span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">  url: </span><span style="color:#A5D6FF;">&#39;xx&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  method: </span><span style="color:#A5D6FF;">&#39;POST&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  data: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    a: </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">axios.</span><span style="color:#D2A8FF;">post</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;xx&#39;</span><span style="color:#C9D1D9;">, {a:</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">} )</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 下面两种方式是等价的</span></span>
<span class="line"><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">  url: </span><span style="color:#A5D6FF;">&#39;xx&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  method: </span><span style="color:#A5D6FF;">&#39;get&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    a: </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;xx&#39;</span><span style="color:#C9D1D9;">, {params: {a:</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">} } )</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="示例代码-8" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-8" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// axios({</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   url: &#39;http://ajax-api.itheima.net/api/city&#39;,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//     pname: &#39;湖北省&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// }).then(res =&gt; {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// })</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// axios.get(&#39;http://ajax-api.itheima.net/api/city&#39;, { params: { pname: &#39;广东省&#39;} })</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// .then(res =&gt; {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// axios({</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   url: &#39;http://ajax-api.itheima.net/api/books&#39;,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   method: &#39;post&#39;,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   data: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//     bookname: &#39;刘博与空姐同居的日子&#39;,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//     author: &#39;钟宇静&#39;,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//     publisher: &#39;刘博出版社&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// }).then( res =&gt; {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   console.log(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// } )</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">      axios.get(&#39;url&#39;, { params: { key:value,key:value } })</span></span>
<span class="line"><span style="color:#8B949E;">      axios.post(&#39;url地址&#39;, { key: value, key:value} )</span></span>
<span class="line"><span style="color:#8B949E;">    </span></span>
<span class="line"><span style="color:#8B949E;">    */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      bookname: </span><span style="color:#A5D6FF;">&#39;刘博与空姐同居的日子&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      author: </span><span style="color:#A5D6FF;">&#39;钟宇静&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      publisher: </span><span style="color:#A5D6FF;">&#39;刘博出版社&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    axios.</span><span style="color:#D2A8FF;">post</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/books&#39;</span><span style="color:#C9D1D9;">, data)</span></span>
<span class="line"><span style="color:#C9D1D9;">    .</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res))</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br></div></div><h3 id="小结-11" tabindex="-1">小结 <a class="header-anchor" href="#小结-11" aria-hidden="true">#</a></h3><ol><li>axios的基地址作用是什么？ <details><summary>答案</summary><ul><li> 可以给所有axios请求的url前面拼接一个统一的前缀 </li></ul></details></li></ol><h2 id="今日作业-必完成" tabindex="-1">今日作业(必完成) <a class="header-anchor" href="#今日作业-必完成" aria-hidden="true">#</a></h2><h3 id="作业1-整理笔记" tabindex="-1">作业1-整理笔记 <a class="header-anchor" href="#作业1-整理笔记" aria-hidden="true">#</a></h3><p>把今天知识点梳理一遍, 记好笔记</p><h3 id="作业2-案例" tabindex="-1">作业2-案例 <a class="header-anchor" href="#作业2-案例" aria-hidden="true">#</a></h3><p>课上案例至少再写一遍</p><h3 id="作业3-答题" tabindex="-1">作业3-答题 <a class="header-anchor" href="#作业3-答题" aria-hidden="true">#</a></h3><p>10道选择题(祝你得100分): <a href="https://ks.wjx.top/vm/OtPMSXr.aspx" target="_blank" rel="noreferrer">https://ks.wjx.top/vm/OtPMSXr.aspx</a></p><h3 id="作业4-每日反馈" tabindex="-1">作业4-每日反馈 <a class="header-anchor" href="#作业4-每日反馈" aria-hidden="true">#</a></h3><p>关注微信群里的, 每日反馈</p><h2 id="参考文献" tabindex="-1">参考文献 <a class="header-anchor" href="#参考文献" aria-hidden="true">#</a></h2><ol><li><a href="https://baike.baidu.com/item/%E8%A1%A8%E5%8D%95" target="_blank" rel="noreferrer">表单概念-&gt;百度百科</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values" target="_blank" rel="noreferrer">accept属性-&gt;mdn</a></li><li><a href="https://www.runoob.com/tags/att-input-accept.html" target="_blank" rel="noreferrer">accept属性-&gt;菜鸟教程</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FormData" target="_blank" rel="noreferrer">FormData-&gt;mdn</a></li><li><a href="https://v5.bootcss.com/docs/components/modal/#passing-options" target="_blank" rel="noreferrer">BS的Model文档</a></li><li><a href="https://www.axios-http.cn/docs/api_intro" target="_blank" rel="noreferrer">axios请求方式别名</a></li></ol></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><!----><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><a class="pager-link prev" href="/tingweipeng/ajax/" data-v-21f75714><span class="desc" data-v-21f75714>Previous page</span><span class="title" data-v-21f75714>01-初识ajax</span></a></div><div class="has-prev pager" data-v-21f75714><a class="pager-link next" href="/tingweipeng/ajax/day03.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>03-xhr和promise</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"ajax_day02.md\":\"e35eca52\",\"ajax_day03.md\":\"585e2c65\",\"ajax_day04.md\":\"0ca703d2\",\"ajax_index.md\":\"2b437449\",\"index.md\":\"ff5d4089\",\"js进阶_day02.md\":\"24ed742a\",\"js进阶_day03.md\":\"f0d3d414\",\"js进阶_day04.md\":\"d30bb382\",\"js进阶_index.md\":\"c6d77850\",\"vue基础_day02.md\":\"5f8c856e\",\"vue基础_day03.md\":\"7cd8d83f\",\"vue基础_index.md\":\"05339e1f\",\"webapis_day02.md\":\"0ca07905\",\"webapis_day03.md\":\"80c6b805\",\"webapis_day04.md\":\"6159ddb6\",\"webapis_day05.md\":\"fdfba8b3\",\"webapis_day06.md\":\"aaece170\",\"webapis_index.md\":\"8bdb89a3\"}")</script>
    <script type="module" async src="/tingweipeng/assets/app.bfa3a24a.js"></script>
    
  </body>
</html>